<template>
<div>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-card class="cav-info" shadow="hover" :body-style="{ padding: '0px' }" id="xxd1"></el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="cav-info" shadow="hover" :body-style="{ padding: '0px' }" id="xxd2"></el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="cav-info" shadow="hover" :body-style="{ padding: '0px' }" id="xxd3"></el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="cav-info" shadow="hover" :body-style="{ padding: '0px' }" id="xxd4"></el-card>
    </el-col>
  </el-row>
  <el-button type="primary" @click="searchfor1()">A区</el-button>
  <el-button type="primary" @click="searchfor2()">B区</el-button>
  <el-button type="primary" @click="searchfor3()">C区</el-button>
  <canvas id="mycanvas" width="1700" height="800"></canvas>
</div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "room",
  data(){
    return{
      areaOccupancyRates: [
        {
          areaCode: "A",
          areaCapacity: '30',
          areaOccupancy: '14',
          areaOccupancyRate: '0.46666667'
        },
        {
          areaCode: "B",
          areaCapacity: '30',
          areaOccupancy: '11',
          areaOccupancyRate: '0.36666667'
        },
        {
          areaCode: "C",
          areaCapacity: '30',
          areaOccupancy: '9',
          areaOccupancyRate: '0.3'
        }
      ],
      totalCapacity: '90',
      totalOccupancy: '34',
      totalOccupancyRate: '',
      aa:[
        {
          areaCode: "A",
          roomNumber: "101",
          numbers: '2',
          empty1: 'false',
          empty2: 'true',
          empty3: 'true',
        },
      ],
      bb:['0','1',],
      value1:'0.6',
      value2:'0.4',
      value3:'0.8',
      value4:'0.6',
      pointData: [
        {
          x1: 100,
          y1: 50,
          x2: 100,
          y2: 250,
        },
        {
          x1: 325,
          y1: 50,
          x2: 325,
          y2: 250,
        },
        {
          x1: 550,
          y1: 50,
          x2: 550,
          y2: 250,
        },
        {
          x1: 775,
          y1: 50,
          x2: 775,
          y2: 250,
        },
        {
          x1: 1000,
          y1: 50,
          x2: 1000,
          y2: 250,
        },
        {
          x1: 1225,
          y1: 50,
          x2: 1225,
          y2: 250,
        },
        //
        {
          x1: 100,
          y1: 300,
          x2: 100,
          y2: 500,
        },
        {
          x1: 325,
          y1: 300,
          x2: 325,
          y2: 500,
        },
        {
          x1: 550,
          y1: 300,
          x2: 550,
          y2: 500,
        },
        {
          x1: 775,
          y1: 300,
          x2: 775,
          y2: 500,
        },
        {
          x1: 1000,
          y1: 300,
          x2: 1000,
          y2: 500,
        },
        {
          x1: 1225,
          y1: 300,
          x2: 1225,
          y2: 500,
        },
        //行1（y=50）
        {
          x1: 100,
          y1: 50,
          x2: 325,
          y2: 50,
        },
        {
          x1: 325,
          y1: 50,
          x2: 550,
          y2: 50,
        },
        {
          x1: 550,
          y1: 50,
          x2: 775,
          y2: 50,
        },
        {
          x1: 775,
          y1: 50,
          x2: 1000,
          y2: 50,
        },
        {
          x1: 1000,
          y1: 50,
          x2: 1225,
          y2: 50,
        },
        //行2(y=250)
        {
          x1: 100,
          y1: 250,
          x2: 325,
          y2: 250,
        },
        {
          x1: 325,
          y1: 250,
          x2: 550,
          y2: 250,
        },
        {
          x1: 550,
          y1: 250,
          x2: 775,
          y2: 250,
        },
        {
          x1: 775,
          y1: 250,
          x2: 1000,
          y2: 250,
        },
        {
          x1: 1000,
          y1: 250,
          x2: 1225,
          y2: 250,
        },
        //行3(y=300)
        {
          x1: 100,
          y1: 300,
          x2: 325,
          y2: 300,
        },
        {
          x1: 325,
          y1: 300,
          x2: 550,
          y2: 300,
        },
        {
          x1: 550,
          y1: 300,
          x2: 775,
          y2: 300,
        },
        {
          x1: 775,
          y1: 300,
          x2: 1000,
          y2: 300,
        },
        {
          x1: 1000,
          y1: 300,
          x2: 1225,
          y2: 300,
        },
        //行4(y=500)
        {
          x1: 100,
          y1: 500,
          x2: 325,
          y2: 500,
        },
        {
          x1: 325,
          y1: 500,
          x2: 550,
          y2: 500,
        },
        {
          x1: 550,
          y1: 500,
          x2: 775,
          y2: 500,
        },
        {
          x1: 775,
          y1: 500,
          x2: 1000,
          y2: 500,
        },
        {
          x1: 1000,
          y1: 500,
          x2: 1225,
          y2: 500,
        },
      ],
      color1: 'rgb(6,246,137)',
      color2: 'rgb(241,5,48)',
      pointData2:[
        //1
        {
          arr: [
            {
              x: 100,
              y: 50,
            },
            {
              x: 325,
              y: 50,
            },
            {
              x: 325,
              y: 250,
            },
            {
              x: 100,
              y: 250,
            },

          ],
          color: 'rgb(6,246,137)',
        },
        //2
        {
          arr: [
            {
              x: 550,
              y: 50,
            },
            {
              x: 325,
              y: 50,
            },
            {
              x: 325,
              y: 250,
            },
            {
              x: 550,
              y: 250,
            },

          ],
          color: 'rgb(6,246,137)',
        },
        //3
        {
          arr: [
            {
              x: 550,
              y: 50,
            },
            {
              x: 775,
              y: 50,
            },
            {
              x: 775,
              y: 250,
            },
            {
              x: 550,
              y: 250,
            },

          ],
          color: 'rgb(6,246,137)',
        },
        //4
        {
          arr: [
            {
              x: 1000,
              y: 50,
            },
            {
              x: 775,
              y: 50,
            },
            {
              x: 775,
              y: 250,
            },
            {
              x: 1000,
              y: 250,
            },

          ],
          color: 'rgb(6,246,137)',
        },
        //5
        {
          arr: [
            {
              x: 1000,
              y: 50,
            },
            {
              x: 1225,
              y: 50,
            },
            {
              x: 1225,
              y: 250,
            },
            {
              x: 1000,
              y: 250,
            },

          ],
          color: 'rgb(6,246,137)',
        },
        //6
        {
          arr: [
            {
              x: 100,
              y: 300,
            },
            {
              x: 325,
              y: 300,
            },
            {
              x: 325,
              y: 500,
            },
            {
              x: 100,
              y: 500,
            },

          ],
          color: 'rgb(6,246,137)',
        },
        //7
        {
          arr: [
            {
              x: 550,
              y: 300,
            },
            {
              x: 325,
              y: 300,
            },
            {
              x: 325,
              y: 500,
            },
            {
              x: 550,
              y: 500,
            },

          ],
          color: 'rgb(6,246,137)',
        },
        //8
        {
          arr: [
            {
              x: 550,
              y: 300,
            },
            {
              x: 775,
              y: 300,
            },
            {
              x: 775,
              y: 500,
            },
            {
              x: 550,
              y: 500,
            },

          ],
          color: 'rgb(6,246,137)',
        },
        //9
        {
          arr: [
            {
              x: 1000,
              y: 300,
            },
            {
              x: 775,
              y: 300,
            },
            {
              x: 775,
              y: 500,
            },
            {
              x: 1000,
              y: 500,
            },

          ],
          color: 'rgb(6,246,137)',
        },
        //10
        {
          arr: [
            {
              x: 1000,
              y: 300,
            },
            {
              x: 1225,
              y: 300,
            },
            {
              x: 1225,
              y: 500,
            },
            {
              x: 1000,
              y: 500,
            },

          ],
          color: 'rgb(6,246,137)',
        },
      ],
    }
  },
  created() {
    axios.get("http://localhost:8080/ward/getOuccupancyRate").then(res=>{
      console.log(res.data);
      this.totalOccupancyRate=res.data.totalOccupancyRate;
      this.areaOccupancyRates[0].areaOccupancyRate=res.data.areaOccupancyRates[0].areaOccupancyRate;
      this.areaOccupancyRates[1].areaOccupancyRate=res.data.areaOccupancyRates[1].areaOccupancyRate;
      this.areaOccupancyRates[2].areaOccupancyRate=res.data.areaOccupancyRates[2].areaOccupancyRate;
      this.value1=this.totalOccupancyRate;
      this.value2=this.areaOccupancyRates[0].areaOccupancyRate;
      this.value3=this.areaOccupancyRates[1].areaOccupancyRate;
      this.value4=this.areaOccupancyRates[2].areaOccupancyRate;
      console.log(this.totalOccupancyRate)
      this.initEcharts1();
      this.initEcharts2();
      this.initEcharts3();
      this.initEcharts4();
    });
    axios.get("http://localhost:8080/ward/getOuccupancyInfomation",{params:{areaCode:'A'}}).then(res=>{
     this.aa=res.data;
     for(let i=0;i<10;i++){
       this.bb[i]=this.aa[i].numbers;
     }
     console.log(this.bb);
     for(let i=0;i<10;i++){
       if(this.bb[i]>0){
         this.pointData2[i].color=this.color1;
       }
       else{
         this.pointData2[i].color=this.color2;
       }
     }
      this.doDraw();
    });
    this.doDraw();
  },
  mounted() {
    this.initEcharts1();
    this.initEcharts2();
    this.initEcharts3();
    this.initEcharts4();
  },
  methods:{
    doDraw(){
      let canvas = document.getElementById('mycanvas');
      // 由于弹窗，确保已获取到
      let a = setInterval(() => {
        // 重复获取
        canvas = document.getElementById('mycanvas');
        if (!canvas) {
          return false;
        } else {
          clearInterval(a);
          // 可以理解为一个画笔，可画路径、矩形、文字、图像


          let context = canvas.getContext('2d');
          this.clearCanvas(context, canvas);
          this.pointData.forEach((item) => {
            const { x1, y1, x2, y2} = item;

            context.lineWidth = 3; //线条的宽度
            context.lineCap = 'round'; //线帽效果
            context.strokeStyle = 'rgb(20, 20, 235)'; //线条颜色
            context.beginPath();

            // 添加阴影
            context.shadowColor = 'rgb(20, 20, 235)';
            context.shadowOffsetX = 0;
            context.shadowOffsetY = 0;
            context.shadowBlur = 6;

            context.setLineDash([1, 0]); // [1,0]为实线

            context.moveTo(x1, y1);
            context.lineTo(x2, y2);


            context.stroke();
          });

          //   绘制矩形
          //   context.strokeStyle = 'red';
          //   context.lineWidth = 3;
          //   context.strokeRect(0, 0, 300, 300);
          // 绘制线条
          //   context.moveTo(0, 0);
          //   context.lineTo(100, 50);
          //   context.strokeStyle = 'red';
          //   context.lineWidth = 3;
          //   context.stroke();
          let content = canvas.getContext('2d');
          this.clearCanvas(content, canvas);
          this.pointData2.forEach((item, index) => {
            this.draw(item, content);
          });

          //文字
          context.font = '16px Arial bolder';
          context.fillStyle = 'black';
          context.fillText('101', 190, 150);
          context.fillText('102', 415, 150);
          context.fillText('103', 640, 150);
          context.fillText('104', 865, 150);
          context.fillText('105', 1090, 150);
          context.fillText('106', 190, 400);
          context.fillText('107', 415, 400);
          context.fillText('108', 640, 400);
          context.fillText('109', 865 ,400);
          context.fillText('110', 1090, 400);
        }
      }, 1);
    },
    draw(obj, ctx) {
      ctx.beginPath();
      ctx.moveTo(obj.arr[0].x, obj.arr[0].y);
      obj.arr.forEach((item, index) => {
        if (index != 0) {
          ctx.lineTo(obj.arr[index].x, obj.arr[index].y)
        }
      });
      ctx.closePath();

      ctx.fillStyle = obj.color;
      ctx.fill();

      ctx.strokeStyle ="transparent";
      ctx.lineWidth = 1;
      ctx.stroke();
    },
    clearCanvas(ctx, canvas) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    },
    initEcharts1(){
    const option = {
      title:{
        text:'总入住率',
      },
      tooltip: {
        show: true
      },
        series: [{
          type: 'liquidFill',
          radius: '100px',
          data: [this.value1],
          label: {
            normal: {
              color: '#fff',
              insideColor: 'transparent',
              textStyle: {
                fontSize: 30,
                fontWeight: 'bold',
              }
            }
          },
          color: [{
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [{
              offset: 1,
              color: ['#6a7feb'], // 0% 处的颜色
            }, {
              offset: 0,
              color: ['#27e5f1'], // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }],
          outline: {
            show: true,
            borderDistance: 5,
            itemStyle: {
              borderColor: '#27e5f1',
              borderWidth: 3
            }
          }
        }]
      };
      const myChart = echarts.init(document.getElementById("xxd1"));
      option&&myChart.setOption(option);
    },
    initEcharts2(){
      const option = {
        title:{
          text:'A区入住率',
        },
        tooltip: {
          show: true
        },
        series: [{
          type: 'liquidFill',
          radius: '100px',
          data: [this.value2],
          label: {
            normal: {
              color: '#fff',
              insideColor: 'transparent',
              textStyle: {
                fontSize: 30,
                fontWeight: 'bold',
              }
            }
          },
          color: [{
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [{
              offset: 1,
              color: ['#6a7feb'], // 0% 处的颜色
            }, {
              offset: 0,
              color: ['#27e5f1'], // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }],
          outline: {
            show: true,
            borderDistance: 5,
            itemStyle: {
              borderColor: '#27e5f1',
              borderWidth: 3
            }
          }
        }]
      };
      const myChart = echarts.init(document.getElementById("xxd2"));
      option&&myChart.setOption(option);
    },
    initEcharts3(){
      const option = {
          title:{
            text:'B区入住率',
          },
        tooltip: {
          show: true
        },
        series: [{
          type: 'liquidFill',
          radius: '100px',
          data: [this.value3],
          label: {
            normal: {
              color: '#fff',
              insideColor: 'transparent',
              textStyle: {
                fontSize: 30,
                fontWeight: 'bold',
              }
            }
          },
          color: [{
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [{
              offset: 1,
              color: ['#6a7feb'], // 0% 处的颜色
            }, {
              offset: 0,
              color: ['#27e5f1'], // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }],
          outline: {
            show: true,
            borderDistance: 5,
            itemStyle: {
              borderColor: '#27e5f1',
              borderWidth: 3
            }
          }
        }]
      };
      const myChart = echarts.init(document.getElementById("xxd3"));
      option&&myChart.setOption(option);
    },
    initEcharts4(){
      const option = {
          title:{
            text:'C区入住率',
          },
        tooltip: {
          show: true
        },
        series: [{
          type: 'liquidFill',
          radius: '100px',
          data: [this.value4],
          label: {
            normal: {
              color: '#fff',
              insideColor: 'transparent',
              textStyle: {
                fontSize: 30,
                fontWeight: 'bold',
              }
            }
          },
          color: [{
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [{
              offset: 1,
              color: ['#6a7feb'], // 0% 处的颜色
            }, {
              offset: 0,
              color: ['#27e5f1'], // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }],
          outline: {
            show: true,
            borderDistance: 5,
            itemStyle: {
              borderColor: '#27e5f1',
              borderWidth: 3
            }
          }
        }]
      };
      const myChart = echarts.init(document.getElementById("xxd4"));
      option&&myChart.setOption(option);
    },
    searchfor1(){
      axios.get("http://localhost:8080/ward/getOuccupancyInfomation",{params:{areaCode:'A'}}).then(res=>{
        this.aa=res.data;
        for(let i=0;i<10;i++){
          this.bb[i]=this.aa[i].numbers;
        }
        console.log(this.bb);
        for(let i=0;i<10;i++){
          if(this.bb[i]>0){
            this.pointData2[i].color=this.color1;
          }
          else{
            this.pointData2[i].color=this.color2;
          }
        }
        this.doDraw();
      });
    },
    searchfor2(){
      axios.get("http://localhost:8080/ward/getOuccupancyInfomation",{params:{areaCode:'B'}}).then(res=>{
        this.aa=res.data;
        for(let i=0;i<10;i++){
          this.bb[i]=this.aa[i].numbers;
        }
        console.log(this.bb);
        for(let i=0;i<10;i++){
          if(this.bb[i]>0){
            this.pointData2[i].color=this.color1;
          }
          else{
            this.pointData2[i].color=this.color2;
          }
        }
        this.doDraw();
      });
    },
    searchfor3(){
      axios.get("http://localhost:8080/ward/getOuccupancyInfomation",{params:{areaCode:'C'}}).then(res=>{
        this.aa=res.data;
        for(let i=0;i<10;i++){
          this.bb[i]=this.aa[i].numbers;
        }
        console.log(this.bb);
        for(let i=0;i<10;i++){
          if(this.bb[i]>0){
            this.pointData2[i].color=this.color1;
          }
          else{
            this.pointData2[i].color=this.color2;
          }
        }
        this.doDraw();
      });
    },
  }
}
</script>

<style scoped>
#mycanvas {
  border: 1px solid rgb(199, 198, 198);
}
.cav-info {
  border-radius: 6px;
  overflow: hidden;
  height: 150px;
  background-color: #ffffff;
}
</style>
